LOLMatrix.teamsDetail=(function(){

    /*价格走势--提示项语言*/
   var  lineOptsLang={
       'en':'{b} Games：{c}',
       'zh-CN':'第 {b} 局：{c}',
       'zh-TW':'第 {b} 局：{c}'
    };


    return {

        //圆环
        circle:function(id,opt){
            if(!id){return false;}
            var def={
                //reverse:true,
                startAngle: -Math.PI / 4 * 3,
                lineCap: 'round',
                thickness:7,
                value:0,
                fill: { color: '#ce6354' },
                emptyFill:"#421811"
            };

            var param= $.extend(def,opt);
            $(id).circleProgress(param);

/*                .on('circle-animation-progress', function(event, progress,stepValue) {
                //$(this).find('strong').html(parseInt(100 * progress) + '<i>%</i>');
                //$(this).find('strong').text(String(stepValue.toFixed(2)).substr(1));
                //  console.log(stepValue.toFixed(1)*10);
                $(this).find('span').text(strArr[4]);
            });*/
        },


        //成员
        members: function () {
            var teamMan=$("#teamMan"),items=$(".team-man-item",teamMan),curName='';
            var table=$("#teamManTable"),rows=$("li",table),curCls='cur',liName='';

            if (items.length > 5) {
                teamMan.slick({
                    slidesToShow: 5,
                    slidesToScroll: 1,
                    accessibility: false,
                    draggable: false,
                    respondTo: "min"
                });
            }

            teamMan.on("mouseover",'.team-man-item',function(){
                curName= $.trim($(this).data("name")).toLowerCase();
                $(this).addClass(curCls).siblings().removeClass(curCls);

                $.each(rows,function(index,item){
                    liName=$.trim($(item).data("name")).toLowerCase();

                    if(liName===curName){
                        $(item).addClass(curCls)
                     }else{
                        $(item).removeClass(curCls)
                     }
                })
            });






        },

        /*数据分析图*/
        radarBaseOpts: {
            backgroundColor: '#150604',

            tooltip:{
                trigger:'item'
            },

            radar: {
                name: {
                    formatter:'{value}',
                    textStyle: {
                       color:'#fff',  ///////////////////////////   ~
                        fontSize:'14'
                    }
                },


                //大小
                radius: 120,

                splitNumber:8,

                //分隔区域
                splitArea:{
                    show:false,
                    areaStyle:{
                        color: 'rgba(24,42,63,1)'
                    }
                },

                //分隔线
                splitLine:{
                    lineStyle: {
                        color: '#876e4c'
                    }
                },

                //坐标线
                axisLine:{
                    lineStyle:{
                        color:"#876e4c"
                    }
                },

                //此数据由服务端提供
                indicator:[]
            },
            series: [
                {
                type: 'radar',



                    //拐点类型
                    symbol:'circle',

                    //拐点大小
                    symbolSize:8,


                    //拐点样式
                    itemStyle: {
                        normal: {
                            color: '#c1ad91'
                        }
                    },

                    //线条样式
                    lineStyle: {
                        normal: {
                            width:2,
                            color: 'rgba(110,212,255,1)',
                            type: 'solid'
                        }
                    },


                    //区域填充样式
                    areaStyle: {
                        normal: {
                            color: '#675740'
                        }
                    },

                //此数据由服务端提供
                data : []
            }]
        },
        radarBase:function(){
            var me=this;

            var leftRadar = echarts.init(document.getElementById('teamRadar'));
            var leftOpts = $.extend(true,{}, me.radarBaseOpts);

            leftOpts.series[0].data[0]= {
                value : [1543, 1000, 1228, 1335, 1555],
                name: 'EDG'
            };
            leftOpts.radar.indicator= [
                { name: '上单\n(1543)', max: 2000},
                { name: '中单\n(1543)', max: 2000},
                { name: 'ADC\n(1543)', max: 2000},
                { name: '辅助\n(1543)', max: 2000},
                { name: '打野\n(1543)', max: 2000}
            ];

            leftRadar.setOption(leftOpts);
        },


        //红方，蓝方
        redBlue:function(){
            var heroNo=$("#heroNo"),
                btns=$("strong",heroNo),
                conts=$('.hero-list',heroNo),
                curCls='cur',
                hideCls='hide',
                curIndex=0;
            btns.on("click",function(){
                curIndex=btns.index(this);
                $(this).addClass(curCls).siblings().removeClass(curCls);
                conts.eq(curIndex).removeClass(hideCls).siblings().addClass(hideCls);
            })



        },

        //赛程
        matchTab:function(){
            var container=$("#teamsMatch"),
                tabHeaders=$(".tab-header li",container),
                tabConts=$(".tab-item" ,container),
                curCls='cur',
                hideCls='hide',
                curIndex=0;

            tabHeaders.on("click",function(){
                curIndex=tabHeaders.index(this);
                $(this).addClass(curCls).siblings().removeClass(curCls);
                tabConts.eq(curIndex).removeClass(hideCls).siblings().addClass(hideCls);
            });

        },



        /*实力走势*/
        lineOpts:{

            //提示框
            tooltip : {
                trigger: 'axis',
                padding: 10,
                backgroundColor:'#a94f3f',
                axisPointer: {type:'line',lineStyle: { color: '#cc5132' }},
                textStyle : {  color: '#fff'},
                formatter: function(){
                    var curLang=LOLMatrix.common.getLang();
                    var str= lineOptsLang[curLang];
                    return str
                }()
            },

            //图表大小及边距设置
            grid: { left: '5%',top:'5%', right: '2%', bottom: '10%'},

            xAxis : {
                type : 'category',
                axisLine: { lineStyle: { color: '#3e3b3d', width: 2 },onZero: false },
                splitLine: {lineStyle: { color: '#3e3b3d',width:2}},
                axisTick: { show: false },
                axisLabel :{
                    textStyle: { color: '#ffffff' },
                    formatter:  function(value,idx){
                        idx++;
                        if(idx<10){
                            return '0'+(idx);
                        }else{
                            return idx;
                        }
                    }
                },
                boundaryGap : false,
                data:[]
            },

            yAxis : {
                type : 'value',
                axisLine : {lineStyle: { color: '#3e3b3d', width: 2 }},
                splitLine: {  lineStyle: { color: '#3e3b3d', type: 'dotted' }}, //dotted,dashed
                axisTick: { show: false },
                axisLabel: {
                    formatter: function (value) {
                        if (value > 10000) {
                            return parseInt(value / 1000) + " k ";
                        } else {
                            return value;
                        }
                    },
                    textStyle: { color: '#ffffff' }
                },

                boundaryGap : false,
                scale: true
                },


            //数据
            series : [
                {
                    type:'line',
                    smooth:true,

                    //拐点类型
                    symbol:'circle',

                    //拐点大小
                    symbolSize:8,


                    //拐点样式
                    itemStyle: {
                        normal: {
                            borderWidth:2,
                            color: '#c5ad8d',
                            borderColor:'rgba(255,255,255,1)'
                        }
                    },

                    //线条样式
                    lineStyle : {  normal: { color: '#cc5132'}},

                    //文本标签
                    label: {
                        normal: {
                            show: true,
                            textStyle:  { fontFamily: "Arial,Microsoft YaHei", fontSize: 10,color:"#cc5132"}
                        }
                    },



                    data:[]
                }
            ]
        },
        lineRecord:function(){

            //获取点数据
            function getData(li) {
                var data = $.trim(li.attr("data-str")), arr = [];
                if (data) {
                    data = data.split(",");
                    $.each(data, function (index, item) {
                        arr.push(item * 1);
                    });
                }
                return arr;
            }

            //获取x轴坐标数据
            function getXData(li) {
                var data = [];
                var num = li.attr("data-num") * 1;
                for (var i = 1; i <= num; i++) {
                    data.push(i);
                }
                return data;
            }



            //set opts data
            function setOptsData(li, opts) {

                //series data
                opts.series[0].data =getData(li);

                //x axis data
                opts.xAxis.data=getXData(li);

                return opts;
            }

            //update chat header content
            function updateChatHeader(header,li) {
                var
                    price = $(".price p", header),
                    priceChange = $(".price-change p", header),
                    pricePercent = $(".price-percent p", header);

                var
                    data = getData(li),
                    len=data.length;


                //price
               // var priceVal = data[len - 1];
                var priceVal = data[0];
                if (priceVal / 1000 > 10) {
                    price.html(parseInt(priceVal * 1 / 1000) + "k");
                } else {
                    price.html(priceVal);
                }

                //price change and price change percent;
                var changeVal = data[len - 1] - data[0];
                var percentVal = (changeVal / priceVal).toFixed(2);
                var cls = { up: 'price-up', down: "price-down" };

                if (changeVal > 0) {
                    if (priceVal / 1000 > 10) {
                        priceChange.addClass(cls.up).removeClass(cls.down).html(parseInt(changeVal / 1000) + "k");
                    } else {
                        priceChange.addClass(cls.up).removeClass(cls.down).html(changeVal);
                    }
                    pricePercent.addClass(cls.up).removeClass(cls.down).html(percentVal + "%");

                } else {
                    if (priceVal / 1000 > 10) {
                        priceChange.addClass(cls.down).removeClass(cls.up).html(parseInt(changeVal / 1000) * -1 + "k");
                    } else {
                        priceChange.addClass(cls.down).removeClass(cls.up).html(changeVal * -1);
                    }
                    pricePercent.addClass(cls.down).removeClass(cls.up).html(percentVal * -1 + "%");
                }
            }


            //show chat and update chat header content
            function showChat(chat,curLi,opts,chatHeader) {
                if (chat) {
                    chat.clear();
                    chat.setOption(setOptsData(curLi, opts));
                }
                updateChatHeader(chatHeader, curLi);
            }


            //===============================================
            var me=this;
            var playersList =  {
                lis: $("span", $("#teamRecordLineBtns")),
                header:$("#teamRecordHeader")
            };





            //first load
            var
                curLi = playersList.lis.filter(".cur"),
                pChart = echarts.init(document.getElementById('teamRecordLineChart')),
                pOpts = $.extend(true, {}, me.lineOpts);

            showChat(pChart, curLi, pOpts, playersList.header);



            //click li
            playersList.lis.on("click", function () {
                curLi = $(this);
                curLi.addClass("cur").siblings().removeClass("cur");
                showChat(pChart, curLi, pOpts, playersList.header);
            });


        },


        /*散点图*/
        scatterOpts:{
            color: ['#c5ad8d', '#ff363b'],
            grid: { left: '3%',top:'5%', right: '2%', bottom: '0%',containLabel:true},

            //提示框
            tooltip : {
                trigger: 'axis',
                padding: 10,
                backgroundColor:'#a94f3f',
                axisPointer: {type:'cross',crossStyle: { color: '#6c6c6c',type:"solid", width: 2, shadowBlur: 0,shadowColor:'#244662' } },
                textStyle : {  color: '#fff'},
                formatter: function (params) {
                    var val=params.value || [];
                    if(val[2]){
                        return val[2]+"："+(val[0]*100).toFixed(1)+"%";
                    }else{
                        return (val[0]*100).toFixed(2)+"%";
                    }
                }
            },
            xAxis: {
                type: 'value',
                axisLine: { lineStyle: { color: '#3f3b3d', width: 2 } },
                splitLine: {show: false},
                axisTick: { show: true, lineStyle: { color: '#3f3b3d', width: 2 }},
                axisLabel :{
                    formatter: function (value, index) {
                        // 格式化 n%
                        if(value>0){
                            return value *100+"%"
                        }else{
                            return value
                        }
                    },
                    textStyle: { color: '#ffffff' }
                },
                boundaryGap: false,
                max: 1
            },
            yAxis: {
                type: 'value',
                axisLine : {lineStyle: { color: '#3f3b3d', width: 2 }},
                splitLine: { lineStyle: { color: '#3f3b3d', type: 'dashed'}}, //dotted,dashed
                axisTick: { show: false },
                axisLabel: {
                    formatter: function (value) {
                        if (value > 10000) {
                            return parseInt(value / 1000) + " k ";
                        } else {
                            return value;
                        }
                    },
                    textStyle: { color: '#ffffff' }
                },
                scale: true
            },
            series: [
                {
                    type: 'scatter',

                    //点大小
                    symbolSize:10,

                    //数据
                    data: []
                },

                //当前成员
                {
                    type: 'scatter',


                    //点大小
                    symbolSize:15,

                    //标注
                    markPoint:{
                        symbol:"pin",
                        symbolSize:70,
                        itemStyle:{
                            normal:{  color:'#243f5d', opacity:.7 }
                        },
                        label:{
                            normal:{
                                show:true,
                                textStyle:{
                                    color:'#ffffff',
                                    fontSize:14
                                }

                            },
                            emphasis:{
                                show:true,
                                textStyle:{
                                    color:'#ffffff',
                                    fontSize:14
                                }

                            }
                        },
                        tooltip : {  show:false},
                        data: [
                            {coord: []}
                        ]
                    },

                    //数据
                    data: [ ]
                }


            ]
        },
        scatterChart:function(){
            var me=this;

           //初始化图形
            var scatter = echarts.init(document.getElementById('teamRecordScatter'));
            var opts = $.extend(true,{}, me.scatterOpts);
            scatter.setOption(opts);


            var
                tab=$("#teamRecordScatterTab"),
                lis=$("li",tab),
                curLi=$("li.cur",tab),
                curParam= {
                    data:{ type:curLi.data('type') }
                };

            //获取数据
            function getData(opts){

                //参数
                var defaultOpts={
                    url:'/_data/data.json',
                    data:{  type:''},
                    dataType: "json",
                    async: true,
                    timeout: 60000
                };
                var settings = $.extend(true, defaultOpts, opts);

                //send request
                return $.ajax(settings).then(
                    function(resData){
                        //服务端  success=false 时；
                        if(!resData.success){
                            //todo  show msg
                            return false;
                        }
                        return resData
                    }
                    ,function(xhrData){
                        return xhrData;
                    }
                );
            }

            //填充数据
            function fillData(param){
                //显示 loading
                scatter.showLoading({
                    text: '',
                    color: '#4aa5c4',
                    textColor: '#fff',
                    maskColor: '#05182b'
                });
                getData(param).then(
                    function (data) {
                        //有数据
                        if (data) {
                            scatter.hideLoading();
                            scatter.setOption({
                                series:[
                                    { data:data.allPlayers },
                                    {
                                        data:data.curPlayer,
                                        markPoint:{
                                            data: [
                                                {coord: data.curPlayer[0]}
                                            ]
                                        }
                                    }
                                ]
                            });
                        }

                        $(".fail-text").addClass('hide');
                    }
                    ,function(){
                        scatter.hideLoading();
                        $(".fail-text").removeClass('hide');
                        $(".fail-text>span").off("click").on("click",function(){
                            fillData(curParam);
                        });
                    }
                );
            }


            //初始加载
            fillData(curParam);

            //切换tab
            lis.on("changetab",function(){
                curParam= {
                    data:{ type:$(this).data('type')}
                };
                fillData(curParam);
            });
        }
    };
})();




$(function(){

    var teamsDetail=LOLMatrix.teamsDetail;
    teamsDetail.circle('#teamBaseCircle',{
        value:.9
    });
    teamsDetail.members();
    teamsDetail.radarBase();

    teamsDetail.circle('#circle1',{
        value:.8,
        fill: { color: '#974135' }
    });
    teamsDetail.circle('#circle2',{
        value:.7,
        fill: { color: '#974135' }
    });
    teamsDetail.circle('#circle3',{
        value:.5,
        fill: { color: '#974135' }
    });

    teamsDetail.redBlue();
    teamsDetail.matchTab();


    teamsDetail.lineRecord();
    teamsDetail.scatterChart();


});
